<template>
    <a-form
    ref="formRef"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 18 }"
    :model="expItems"
  >
    <a-row :gutter="22" style="margin-left: 0px;margin-right: 0px;">
        <a-col :span="22">
            <a-form-item v-if="expItems.NO!==''&&expItems.NO!==undefined" label="处理人类型" name="NO">
                <a-select
                    ref="select"
                    v-model:value="expItems.NO"
                    disabled
                    style="width: 100%"
                >
                    <a-select-option  
                        v-for="opt in itemData"  
                        :key="opt.NO"  
                        :value="opt.NO"  
                    >  
                        {{ opt.NAME }}  
                    </a-select-option> 
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="22">
            <a-form-item v-if="expItems.NO==='byLeader'" label="处理人" name="leaderSubDataType">
                <a-select
                    ref="select"
                    v-model:value="expItems.leaderSubDataType"
                    style="width: 100%"
                >
                    <a-select-option  
                        v-for="opt in leaderOptions"  
                        :key="opt.NO"  
                        :value="opt.NO"  
                    >  
                        {{ opt.NAME }}  
                    </a-select-option> 
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="22">
            <a-form-item v-if="expItems.leaderSubDataType==='nodeUsers'" label="处理步骤" name="nodeData">
                <a-select
                    ref="select"
                    v-model:value="expItems.nodeData"
                    style="width: 100%"
                >
                    <a-select-option  
                        v-for="opt in taskAttrStore.tasks"  
                        :key="opt.TASK_NODE_NO"  
                        :value="opt.TASK_NODE_NO"  
                    >  
                        {{ opt.TASK_NODE_NAME }}  
                    </a-select-option> 
                </a-select>
            </a-form-item>
        </a-col>
        <a-col :span="22">
            <a-form-item v-if="expItems.leaderSubDataType==='formUsers'" label="字段名称" name="userFormKey">
                <a-input v-model:value="expItems.userFormKey"></a-input>
            </a-form-item>
        </a-col>
        <a-col :span="22" style="text-align: right">
          <a-button v-if="expItems.NO!==''&&expItems.NO!==undefined" type="primary" @click="handleSubmit(expItems)">添加设置</a-button>
        </a-col>
    </a-row>
  </a-form>
  </template>
  <script setup lang="tsx">
     import { ref, reactive, onMounted } from 'vue';
    import {createItemData,byLeaderOptions} from '@/components/setting/subComponents/expItems';
    import {taskAttr} from '@/store/modules/taskAttr';

    interface Props {
        defaultData?: any;
    }
    const props = withDefaults(defineProps<Props>(), {
        defaultData: [{
            NO: '',
            NAME: '',
            ORG_TYPE: '',
            nodeData:'',
            orgData:[],
            userSubDataType:'',
            userFormKey:'',
        }]
  });
  defineOptions({
    name: 'byLeader',
  });
  onMounted(()=>loadInfo());
  const emit = defineEmits(['updateValue']);  
    const expItems = ref({
        NO: '',
        NAME: '',
        ORG_TYPE: '',
        nodeData:'',
        orgData:[],
        leaderSubDataType:'',
        userFormKey:'',
    });
    const resetExpItems=ref({
      NO: '',
      NAME: '',
      ORG_TYPE: '',
      nodeData:'',
      orgData:[],
      leaderSubDataType:'',
      userFormKey:'',
    });
    interface State {
        settingData:any;
    }
    const state = reactive<State>({
        settingData:[],
    });
    const leaderOptions=byLeaderOptions();
    //节点列表
    const taskAttrStore = taskAttr();
    //规则列表/选择项
    const itemData=createItemData();
    //增加的规则的列表
    const selectDatas=ref<any>([]);
    
    const loadInfo=()=>{
        expItems.value=props.defaultData;
    }
  //点击确认
  const handleSubmit=(record)=>{
    const setValue={
      NO:record.NO,
      NAME:record.NAME,
      ORG_TYPE:record.NO,
      DATA:record,
    }
    state.settingData.push(setValue);
    emit('updateValue', state.settingData); 
    console.log(record,"record3333");
    //重置设置页面
    Object.assign(expItems, resetExpItems.value);
  }
</script>